<template>
  <div class="data-table">
    <!-- v-loading="loading" -->

    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      :stripe="stripe"
      :border="border"
      :size="size"
      :span-method="spanMethod"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      :row-key="rowKey"
      :tree-props="treeProps"
      :max-height="maxHeight"
      highlight-current-row
    >
      <template v-for="(col, index) in columns">
        <!-- 操作列/自定义列 -->
        <slot v-if="col.slot" :name="col.slot"></slot>

        <!-- 普通列 -->
        <el-table-column
          v-else
          :key="index"
          :prop="col.prop"
          :label="col.label"
          :width="col.width"
          :show-overflow-tooltip="col.tooltip"
          :formatter="col.formatter || null"
          :align="col.align ? col.align : 'center'"
          header-align="center"
          :fixed="col.fixed"
        />
      </template>
    </el-table>
    <!-- 是否调用分页 -->
    <el-pagination
      class="mt20 mb20"
      v-if="pageObj"
      background
      :small="size === 'small' ? true : false"
      layout="sizes, total, prev, pager, next"
      :page-size="pageObj.pageSize"
      :page-sizes="[5, 10, 20, 50, 100]"
      :total="total"
      :hide-on-single-page="true"
      :current-page="pageObj.pageNo"
      @current-change="pageChange"
      @size-change="sizeChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    size: String,
    maxHeight: {
      type: Number
    },
    stripe: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    border: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    spanMethod: {
      type: Function,
      default: () => {}
    },
    rowKey: {
      type: String,
      default: ''
    },
    treeProps: {
      type: Object,
      default: () => {
        return {}
      }
    },
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      required: false
    },
    total: {
      type: Number,
      default: 1
    },
    pageObj: {
      type: Object,
      default() {
        return {
          pageSize: 10,
          pageNo: 1
        }
      }
    }
  },
  watch: {},
  data() {
    return {
      multipleSelection: []
    }
  },
  methods: {
    clear() {
      this.$refs.table.clearSelection()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('tableCheck', val)
    },
    handleCurrentChange(val) {
      this.$emit('current-change', val)
    },
    pageChange(pageNo) {
      this.$emit('getList', { pageNo })
    },
    sizeChange(pageSize) {
      this.$emit('getList', { pageNo: 1, pageSize })
    },
    handleRowClick(row, column, event) {
      this.$emit('row-click', row, column, event)
    }
  }
}
</script>

<style scoped>
.el-pagination {
  float: right;
}
</style>
